<!--
 * @Descripttion: 渠道授权
 * @version: 
 * @Author: zhangjie
 * @Date: 2021-04-28 14:15:04
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-04-28 15:53:09
-->
<template>
  <KiFormDialog
    v-if="hotelName"
    :show.sync="showOfChannel"
    class="dialog-channel"
    title="渠道授权"
    :before-close="()=>{ $emit('clearHotelId') }">
    <div class="table-operation">
      <span>
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>
    <template>
    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-list__
    >
      <el-table-column align="center" type="index"/>
      <el-table-column label="渠道id" prop="channelId"/>
      <el-table-column label="渠道名称" prop="channelName"/>
      <el-table-column label="渠道类型">
        <template slot-scope="{row:{channelType}}">
          {{ channelType | key2label__(options.channelType) }}
        </template>
      </el-table-column>
      <el-table-column label="渠道状态" align="center">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.status? true : false"
            active-text="启用"
            inactive-text="停用"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="授权状态" align="center" prop="authStatus">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.authStatus? true : false"
            active-color="#67c23a"
            inactive-color="#f4f4f5"
            active-text="已授权"
            inactive-text="未授权"
            disabled
          >
          </el-switch> 
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="!readonly">
        <template slot-scope="{row: { status, channelId, authStatus, hotelId }}">
          <AuthButton
            @click="handleChannel({'channelId': channelId, 'hotelId': hotelId}, 'authChannel')"
            :show="status === 1 && authStatus === 0"
            name="授权"
            :elPopconfirmProps="{
              title: '确认授权？'
            }"
          />
          <AuthButton
            @click="handleChannel({'channelId': channelId, 'hotelId': hotelId}, 'cancelAuthChannel')"
            :show="authStatus === 1"
            name="取消授权"
            type="danger"
            circle
            :elPopconfirmProps="{
              title: '确认取消授权？'
            }"
          >
            <i class="el-icon-close"/>
          </AuthButton>

        </template>
      </el-table-column>
    </el-table>
      <div slot="footer" class="pt50"></div>
    </template>
  </KiFormDialog>

</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
export default {
  name: 'Channel',
  mixins: [pageMixin],
  props: ['readonly'],
  watch: {
    '$attrs.id': {
      handler: function(newID) {
        if (newID) {
          this.queryForDetail()
          this.showOfChannel = true
        }
      },
      immediate: true
    },
  },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/hotel-channel',
    // axiosConfig: {
    //   getList: {
    //     url: 'list'
    //   },
    //   d: {
    //     method: 'DELETE'
    //   },
    //   r: ({ id }) => ({
    //     url: id
    //   })
    // }
  }),
  data () {
    return {
      list: {
        filter: {
          hotelId: this.$attrs.id
        }
      },
      options: {
        channelType: [
          { dataValue: 1, dataName: '自有渠道' },
          { dataValue: 2, dataName: '平台渠道' },
        ],
        authStatus: [
          { value: 0, text: '未授权', type: 'info' },
          { value: 1, text: '已授权', type: 'success' },
        ]
      },
      showOfChannel: false,
      hotelName: '',

    }
  },
  methods: {
    queryForDetail() {
      this.$POST('sot-admin-api/hotel/self-employed/queryForDetail', { 'id': this.$attrs.id }).then(_ => {
        this.hotelName = _.data?.hotelName
      })
    },
    handleChannel(par, path) {
      return this.$POST(`sot-admin-api/hotel/hotel-channel/${path}`, par).then(_ => {
        if(_.errorCode === '00000') return this.getList()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
:deep(.dialog-channel) {
  .el-alert__title{
    font-size: 15px;
  }
}
</style>
